<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="../../../resource/js/webuploader/webuploader.css">
    <link rel="stylesheet" href="../../../resource/css/upload.css">

</head>

<body>
    <div class="content">
        <div class="example_img">
            <div class="example_title">
                <label style="color: red;">*</label>
                <label class="warn">示例图片(请按此标准上传图片)</label>
            </div>
        </div>

        <div class="pic">
            <form action="" method="POST">
                <table>
                    <tr class="tr">
                        <td class="td">
                            <div class="z_photo">
                                <div class="z_file" id="z_file">
                                    <input id="filePicker" type="file" name="file" accept="image/*" multiple="multiple" onchange=""  />
                                </div>
                            </div>
                        </td>
                        <td class="title">
                            <img id="img" src="" alt="">
                            <input type="hidden" name="pic_pic" id="pic_pic" value="">
                        </td>
                    </tr>
                    <tr class="carInfo">
                        <td class="title" colspan="2">图片简介：<input class="input intro" type="text" name="intro" placeholder="请输入15字左右的简介"></td>
                    </tr>
                    <tr class="carInfo">
                        <td class="title" colspan="2">车主手机号：<input class="input" type="text" name="owner_phone" placeholder="请输入车主手机号"></td>
                    </tr>
                    <tr class="carInfo">
                        <td class="title" colspan="2">车牌号：<input class="input number" type="text" name="car_number" placeholder="请输入车牌号"></td>
                    </tr>
                </table>
            </form>
            <button class="submit" id="submit">提交</button>
        </div>
        <div style="clear: both"></div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="../../../resource/js/webuploader/webuploader.js"></script>
<script src="../../../resource/js/layer/2.4/layer.js"></script>
<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'></script>
<script src='https://static.app1.magcloud.net/public/static/dest/js/libs/magjs-x.js'></script>
<script>
    // mag.camera({
    //     preview: function(res){
    //         // res: {key: '图片唯一标识', data: '缩略图的二进制base64编码字符串，仅仅用于小图展示'}
    //     },
    //     success: function(res){
    //         // res: {aid: '图片id', url:'图片url', key: '图片唯一标识'}
    //         // New:客户端版本4.5.1（2019年1月15号之后）及以上才会返回url这个参数，之前的版本仍然需要使用aid获取图片url，根据aid获取图片url方法请看下面说明
    //     },
    //     fail: function(res){
    //         // res: {key: '图片唯一标识'}
    //     },
    // });
    var uploader = WebUploader.create({
        //自动上传
        auto: true,
        //swf文件路径
        swf: '/../../../resource/js/webuploader/Uploader.swf',
        ////文件接收服务端
        server: "/Common/uploadFile",
        //选择文件的按钮。
        pick: "#z_file",
        //单次上传最多图片数
        fileNumLimit: 1,
        fileVal: "pic",
        duplicate: true,
        chunkRetry : 2,
        //允许选择的图片格式
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

    //文件上传队列
    uploader.on("filesQueued", function (file, response) {
        // console.log("文件正在上传");
    });
    //文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        // layer.msg("正在上传中.....");
    });
    //文件上传成功
    uploader.on('uploadSuccess', function (file, response) {
        // console.log(file);
        // console.log("<br />");
        // console.log(response);
        // console.log("测试数据");
        // console.log(response['data']);
        // return false;

        // if (response['code'] == 200) {
            var imgObjPreview = document.getElementById("img");
            var imgObj = document.getElementById("pic_pic");
            //元素样式赋值
            imgObjPreview.style.width = '7rem';
            imgObjPreview.style.height = '80px';
            //元素赋值
            imgObjPreview.src = response['data']['pic_url'];
            imgObj.value= response['data']['pic_url'];
        // }  else {
        //     layer.msg('上传图片失败');
        // }





    });
</script>
<script>
    $("#submit").click(function () {
        var pic = $('input[name=pic_pic]').val();
        var intro = $('input[name=intro]').val();
        var owner_phone = $('input[name=owner_phone]').val();
        var car_number = $('input[name=car_number]').val();

        if (!pic) {
            layer.msg('上传图片不能为空');
            return false;
        }
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
        if (!owner_phone) {
            // mag.toast('手机号不能为空');
            layer.msg('车主手机号不能为空');
            return false;
        } else if(!myreg.test(owner_phone)){
            // mag.toast('手机号格式不正确');
            layer.msg("车主手机号格式不正确");
            return false;
        }

        if (!car_number){
            layer.msg('车牌不能为空');
            return false;
        }

        $.ajax({
            type:'POST',
            url: "/Stick/uploadStickPic",
            data:{
                owner_phone:owner_phone,
                intro:intro,
                pic:pic,
                car_number:car_number
            },
            dataType:'json',
            success:function (e) {
                // console.log(e);
                // return false;
                if (e.code == 200) {
                    layer.msg("上传成功");
                }  else {
                    layer.msg(e.msg);
                }
            }
        })
    })
</script>
</html>